<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			a {
				text-decoration: none;
				color: #000000;
			}
			#alllist{
				margin-top: 65px;
				margin-bottom: -40px;
			}
			
			#hedaerlist {
				background-color: #E6E6E6;				
				padding: 0px 20px 0px 20px;
				height: 35px;
				line-height: 35px;
			}
			
			#mainbodylist1 {
				background-color: #F5F5F5;
				margin: 15px 0px 20px 0px;
			}
			
			#mainbodylist2 {
				border-top: 1px #C7C7CC solid;
				padding: 10px;
				color: #999999;
			}
			
			#mainbodylist1 span {
				color: #F5741B;
			}
			
			#footerlist div {
				margin: -10px 0px 15px 0px;
				line-height: 25px;
			}
			#orderagain{
				background: #23CAD0;
				color: white;
				padding: 5px 15px;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<!-- 主界面不动、菜单移动 -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left" id="offCanvasSide">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->

					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav" style="background-color: #23CAD0;">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
					<h1 class="mui-title" style="color: white;font-size: 24px;">袋鼠捎货</h1>
				</header>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="mui-bar mui-bar-nav">
							<a class="mui-icon"><img src="img/slrbank.png" style="width: 60%" /></a>
							<h1 class="mui-title">全部订单</h1>
						</div>
						<!--主题内容-->
						<!--一个订单一个div-->
						<div id="alllist">
							<div id="hedaerlist">
								<div style="float: left;">订单号:<span>3456258332</span></div>
								<div style="float: right;">2018-08-20 15:30</div>
							</div>
							<div class="container" style="background-color:#FFFFFF ;">
								<div id="mainbodylist1">
									<div class="mui-row" style="padding: 15px 0px 10px 15px;">
										<div class="mui-col-xs-8">
											<div>郑州市金水区绿地-峰会天下1004</div>
											<div>明天（周三） 15：00送达</div>
										</div>
										<div class="mui-col-xs-4" style="top:10px;left: 10px;line-height: 40PX;">
											配送费 <span>25元</span> 
										</div>
									</div>
									<div id="mainbodylist2">
										共计<span>7</span>箱货品,总重<span>120</span>Kg
									</div>
								</div>
								<div id="footerlist">
									<div style="float: left">
										订单已完成
									</div>
									<div style="float:right">
										<span style="margin-right: 10px;">已评价</span>
										<a href="#">查看评价</a>
									</div>
								</div>
							</div>

						</div>
						<!--第二个订单-->
						<div id="alllist">
							<div id="hedaerlist">
								<div style="float: left;">订单号:<span>3456258332</span></div>
								<div style="float: right;">2018-08-20 15:30</div>
							</div>
							<div class="container" style="background-color:#FFFFFF ;">
								<div id="mainbodylist1">
									<div class="mui-row" style="padding: 15px 0px 10px 15px;">
										<div class="mui-col-xs-8">
											<div>郑州市金水区绿地-峰会天下1004</div>
											<div>明天（周三） 15：00送达</div>
										</div>
										<div class="mui-col-xs-4" style="top:10px;left: 10px;line-height: 40PX;">
											配送费 <span>25元</span> 
										</div>
									</div>
									<div id="mainbodylist2">
										共计<span>7</span>箱货品,总重<span>120</span>Kg
									</div>
								</div>
								<div id="footerlist">
									<div style="float: left">
										订单已取消
									</div>
									<div style="float:right">
										<span id="orderagain">再次下单</span>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
	</body>

</html>